<template>

    <el-container>
        <el-header id="manageHeader" height="90px">
            <!-- 搜索表单 -->
            <el-form :inline="true" :model="searchBase" class="demo-form-inline" style="margin-top: 1.5%;">
                <el-form-item label="学期">
                     <el-select v-model="value" style="width:90px" placeholder="请选择">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="课程名称">
                  <el-input v-model="searchBase.courseName" placeholder="类型" style="width: 160px;">
                    </el-input>
                </el-form-item>
                  <el-form-item label="班级名称">
                    <el-input v-model="searchBase.Classname" placeholder="类型" style="width: 160px;">
                    </el-input>
                </el-form-item>
                   <el-form-item label="学院">
                    <el-select v-model="value1" style="width:100px" placeholder="请选择" >
                        <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
               
                <el-form-item>
                    <el-button type="primary" @click="onsubmit">查询</el-button>
                </el-form-item>
                <!-- 导出数据为Excel
                <el-form-item>
                    <el-button type="primary">导出Excel</el-button>
                </el-form-item> -->
            </el-form>
        </el-header>
        <el-main>
            <template>
                <el-table :data="workData" style="width: 100%">
                    <el-table-column prop="term" label="学期" align="center">
                    </el-table-column>
                    <el-table-column prop="faculty" label="开设学院 " align="center">
                    </el-table-column>
                    <el-table-column prop="courseName" label="课程名称" align="center">
                    </el-table-column>
                    <el-table-column prop="classname" label="班级名称" align="center">
                    </el-table-column>
                    <el-table-column prop="teachHour" label="学时" align="center">
                    </el-table-column>
                    <el-table-column prop="credit" label="学分" align="center">
                    </el-table-column>
                </el-table>
            </template>
            <!--分页工具条-->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-size="10"
                layout="total, prev, pager, next, jumper" :total="totalCount">
            </el-pagination>

        </el-main>
    </el-container>
</template>

<script>
import axios from "axios";

export default {
    name: 'LeaderTeachwork',
    data() {
        return {
            // 搜索的表单
            searchBase: {
                term :"",
               courseName:"",
               faculty:"",
               Classname:""
            }, 
             options: [{
                value: "第一学期",
                label: '第一学期'
            }, {
                    value: "第二学期",
                    label: '第二学期'
                },{
                value: "",
                label: '无'
            }],
            value: "",
               // 学院下拉框
            options1: [{
                value: '计算机学院',
                label: '计算机学院'
            }, {
                value: '外国语学院',
                label: '外国语学院'
            }, {
                value: '软件学院',
                label: '软件学院'
                }, {
                    value: '',
                    label: '无'
                }],
            value1: '',
          
            // 统计表格数据
            workData: [],
            // 分页
            totalCount: 0,

            // 当前页码
            currentPage: 1,
            pageSize: 10,
        }

    },
    mounted() {
        this.selectAll();
    },
    methods: {
        onsubmit() {
              this.searchBase.term=this.value
            this.searchBase.faculty=this.value1
            this.selectAll()

        },
        selectAll() {
            axios({
                method: "post",
                url: " http://localhost:8888/lead_Work/selectByPage?currentPage=" + 
                this.currentPage + "&pageSize=" + this.pageSize ,
                data: this.searchBase
            }).then(resp => {
                this.workData= resp.data.data.rows;
                this.totalCount = resp.data.data.totalCount;
            })
        },


        // 分页操作
        handleSizeChange(val) {
            this.pageSize = val;
            this.selectAll();
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            this.selectAll();
        }
    },
}


</script>

<style>
</style>